<template>
  <div>
    <form @submit.prevent="addTodo">
      <input type="text" name="todo" placeholder="add todo ...">
    </form>
    <ul class="todos">
      <li class="todo" v-for="(todo, index) in todos" :key="index" :class="{'todo-completed': todo.isCompleted}">
        <span class="todo-text">{{ todo.text }}</span>
        <span class="todo-actions">
          <i class="todo-action iconfont icon-delete" @click="deleteTodo(index)"></i>
          <i v-if="todo.isCompleted" class="todo-action iconfont icon-refresh" @click="refreshTodo(index)"></i>
          <i v-else class="todo-action iconfont icon-success" @click="completeTodo(index)"></i>
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "TodoList",
    data() {
      return {
        todos: [
          {text: 'learn vuejs', isCompleted: false},
          {text: 'learn react', isCompleted: false}
        ]
      }
    },
    methods: {
      refreshTodo(index) {
        this.todos[index].isCompleted = false
      },
      completeTodo(index) {
        this.todos[index].isCompleted = true
      },
      deleteTodo(index) {
        this.todos.splice(index, 1)
      },
      addTodo(e) {
        // e.preventDefault()

        let text = e.target.todo.value

        if (!!text) {
          this.todos.push({text: text, isCompleted: false})
          e.target.todo.value = ''
          e.target.todo.focus()
        }
      }
    }
  }
</script>

<style>
  @import "../assets/iconfont/iconfont.css";

  ul.todos {
    list-style: none;
  }

  li.todo-completed span.todo-text {
    color: #ddd;
    text-decoration: line-through;
    font-style: italic;
  }

  input, ul, ul .iconfont {
    font-size: 2rem !important;
  }

</style>
